<template>
  <div class="item">
    <div class="item" style="margin-right: 20px">
      商品数: 
      <a-spin :spinning="isLoading">
        <div style="padding-left: 10px;">
          <div class="item" v-if="productNumber == ''">
            <a-tooltip>
                <template #title>点击查询</template>
                <SearchOutlined style="color: #40a9ff; cursor: pointer;" @click="searchData" />
            </a-tooltip>
          </div>
          <div v-else style="color: #40a9ff;">
            <a-tooltip>
              <template #title>{{ productNumber }}</template>
              {{ productNumber }}
            </a-tooltip>
          </div>
        </div>
      </a-spin>
    </div>
    <div class="item">
      开店: 
      <a-spin :spinning="isLoading">
        <div style="padding-left: 10px;">
          <div class="item" v-if="shopNumber == ''">
            <a-tooltip>
              <template #title>点击查询</template>
              <SearchOutlined style="color: #40a9ff; cursor: pointer;" @click="searchData" />
            </a-tooltip>
          </div>
          <div v-else style="color: #40a9ff;">
          </div>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { SearchOutlined} from '@ant-design/icons-vue';
import {isLogin} from '~/logic'
import { $itemType } from '~/contentScripts/views/tao/detail/components/commodityData/index'

const emit = defineEmits(['login'])
const __option = getCurrentInstance()?.appContext.provides.option;
const getItem = () => {
  const instance = getCurrentInstance();
  const item = (instance?.proxy as { $item?: any }).$item ?? {};
  return item;
}
const item = getItem()
const isLoading = ref(false)
const productNumber = ref('')
const shopNumberTop = ref('')
const shopNumber = ref('')

const getData = async() => {
  if (isLogin({emit}, __option)) {
    isLoading.value = true
    const res: $itemType = await  item.getDetail()
    productNumber.value = res.seller.allItemCount
    shopNumber.value = res.seller.starts.split(' ')[0]
    shopNumberTop.value = res.seller.starts
    isLoading.value = false
  }
}

const searchData = async() => {
  await getData()
}

</script>

<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>